<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    
    .auth-container {
      display: flex;
      max-width: 900px;
      width: 100%;
      background: white;
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      overflow: hidden;
    }
    
    .auth-illustration {
      flex: 1;
      background: linear-gradient(135deg, #28a745 0%, #218838 100%);
      color: white;
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
    }
    
    .auth-illustration h2 {
      margin-bottom: 20px;
      font-weight: 700;
      font-size: 28px;
    }
    
    .auth-illustration p {
      opacity: 0.9;
      margin-bottom: 30px;
      line-height: 1.6;
    }
    
    .auth-form {
      flex: 1;
      padding: 50px;
    }
    
    .form-header {
      margin-bottom: 35px;
      text-align: center;
    }
    
    .form-title {
      color: #2d3748;
      font-weight: 700;
      font-size: 26px;
      margin-bottom: 8px;
    }
    
    .form-subtitle {
      color: #718096;
      font-size: 14px;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    .form-label {
      color: #4a5568;
      font-weight: 500;
      margin-bottom: 8px;
      display: block;
      font-size: 14px;
    }
    
    .form-control {
      width: 100%;
      height: 45px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      padding: 0 15px;
      font-size: 15px;
      transition: all 0.3s ease;
    }
    
    .form-control:focus {
      border-color: #28a745;
      box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
      outline: none;
    }
    
    .required {
      color: #e53e3e;
      margin-right: 4px;
    }
    
    .form-actions {
      margin-top: 30px;
    }
    
    .signup-btn {
      width: 100%;
      height: 48px;
      background-color: #28a745;
      border: none;
      border-radius: 6px;
      color: white;
      font-size: 16px;
      font-weight: 500;
      transition: all 0.3s ease;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .signup-btn:hover {
      background-color: #218838;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    }
    
    .signup-btn:active {
      transform: translateY(0);
    }
    
    .auth-switch {
      text-align: center;
      margin-top: 20px;
      color: #718096;
      font-size: 14px;
    }
    
    .auth-switch a {
      color: #28a745;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }
    
    .auth-switch a:hover {
      color: #1e7e34;
      text-decoration: underline;
    }
    
    .input-icon {
      position: relative;
    }
    
    .input-icon i {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #a0aec0;
    }
    
    .input-icon .form-control {
      padding-left: 45px;
    }
    
    .password-hint {
      font-size: 12px;
      color: #718096;
      margin-top: 5px;
      display: block;
    }
    
    @media (max-width: 768px) {
      .auth-container {
        flex-direction: column;
      }
      
      .auth-illustration {
        padding: 30px 20px;
      }
      
      .auth-form {
        padding: 30px 20px;
      }
    }
  </style>
</head>
<body>
  <div class="auth-container">
    <div class="auth-illustration">
      <h2>创建新账户</h2>
      <p>加入我们的安全云存储服务，您的文件可随时随地访问。</p>
      <i class="fas fa-user-plus fa-5x" style="margin-top: auto; opacity: 0.8;"></i>
    </div>
    
    <div class="auth-form">
      <div class="form-header">
        <h2 class="form-title">注册</h2>
        <p class="form-subtitle">创建您的账户以开始使用</p>
      </div>
      
      <form>
        <div class="form-group">
          <label class="form-label">
            <span class="required">*</span>用户名
          </label>
          <div class="input-icon">
            <i class="fas fa-user"></i>
            <input id="username" type="text" class="form-control" placeholder="请输入用户名">
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">
            <span class="required">*</span>密码
          </label>
          <div class="input-icon">
            <i class="fas fa-lock"></i>
            <input id="password" type="password" class="form-control" placeholder="请输入密码">
          </div>
          <span class="password-hint">密码需至少 8 个字符，包含字母和数字</span>
        </div>

        <div class="form-group">
          <label class="form-label">
            <span class="required">*</span>重复密码
          </label>
          <div class="input-icon">
            <i class="fas fa-check-circle"></i>
            <input id="passwordc" type="password" class="form-control" placeholder="请再次输入密码">
          </div>
        </div>

        <div class="form-actions">
          <input class="signup-btn" type="button" value="创建账户" onclick='onSignup()' />
        </div>
        
        <div class="auth-switch">
          已经有账号？ <a href="/static/view/signin.html">登录</a>
        </div>
      </form>
    </div>
  </div>
</body>
<script lang="javascript">
  function onSignup() {
    var username = document.getElementById('username');
    var password = document.getElementById('password');
    var passwordc = document.getElementById('passwordc');
    
    // 输入验证
    if (!username.value.trim()) {
      alert('请输入用户名');
      username.focus();
      return;
    }
    
    if (password.value.length < 2) {
      alert('密码必须至少2个字符');
      password.focus();
      return;
    }
    
    if (password.value !== passwordc.value) {
      alert('密码不匹配!');
      passwordc.focus();
      return;
    }

    $.ajax({
      url: "/user/signup",
      type: "POST",
      data: {
        "username": username.value,
        "password": password.value
      },
      error: function (jqXHR, textStatus, errorThrown) {
        if (textStatus == "error") {
          alert(textStatus + " : " + errorThrown);
        } else {
          alert(textStatus);
        }
      },
      success: function (data, textStatus, jqXHR) {
        if (data == 'SUCCESS') {
          // 显示成功消息并跳转
          if (confirm('注册成功！是否立即前往登录？')) {
            window.location.href = '/static/view/signin.html';
          }
        } else {
          alert('注册失败！');
        }
      }
    });
  }
  
  // 支持回车键注册
  document.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      onSignup();
    }
  });
</script>
</html>
